<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>热搜展示</title>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
    <link rel="shortcut icon" th:href="@{/static/favicon.ico}"/>
<!--    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;script-src * 'unsafe-inline'">-->
</head>
<body class="pg">
<div id="es-frame" style="width: 100%;">
    <iframe src="http://8.141.53.157:5601/app/dashboards#/view/b22d4120-f71b-11eb-b4ed-f5e81fae2155?embed=true&_g=(filters%3A!())&show-query-input=true&show-time-filter=true" height="1365" width="100%" style="border: medium none;"></iframe>
</div>

<div class="page" id="app">
    <div id="header" class="header-list-app">
        <div class="headerLayout">
            <div class="headerCon ">
                <div id="mallSearch" class="mall-search">
                    <form name="searchTop" class="mallSearch-form clearfix">
                        <fieldset>
                            <legend><h1>热搜搜索</h1></legend>
                            <hr>
                            <div class="mallSearch-input clearfix">
                                <div class="s-combobox" id="s-combobox-685">
                                    <div class="s-combobox-input-wrap">
                                        <label for="service">热搜选择：</label>
                                        <select v-model="keyword" id="service" class="s-combobox-input" required>
                                            <option value="weibo/hot-search" selected="selected">微博热搜榜</option>
                                            <option value="zhihu/top-search">知乎热搜</option>
                                            <option value="zhihu/billboard">知乎热榜</option>
                                        </select>
                                    </div>
                                </div>
                                <button type="submit" @click.prevent="searchKey" id="searchbtn">搜索</button>
                            </div>
                            <div class="mallSearch-input clearfix">
                                <div class="s-combobox-input-wrap">
                                    <span> 起始页面：</span>
                                    <input v-model="page" type="text" autocomplete="off" class="s-combobox-input"
                                           id="page">
                                </div>
                            </div>
                            <div class="mallSearch-input clearfix">
                                <div class="s-combobox-input-wrap">
                                    <span> 每页大小：</span>
                                    <input v-model="per_page" type="text" autocomplete="off" class="s-combobox-input"
                                           id="per_page" required>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="content">
        <div class="main">
            <div class="info" v-if="results.code === 500 || results.code === 404" style="color: red;">
                错误：{{results.message}}
            </div>
            <table v-model="results" v-if="results.code !== 500 && results.code !== 404">
                <thead v-if="results.length !== 0">
                <tr>
                    <th>排名</th>
                    <th v-if="results[0] && results[0]['keyword']">关键词</th>
                    <th v-else-if="results[0] && results[0]['title']">标题</th>
                    <th v-if="(results[0] && results[0]['subTitle'] || results[0]['excerpt']) || results[1] && results[1]['subTitle']">
                        副标题
                    </th>
                    <th v-if="results[0] && (results[0]['count'] || results[0]['metrics']) || results[1] && (results[1]['count'] || results[1]['metrics'])">
                        热度
                    </th>
                    <th v-if="results[0] && results[0]['flag'] || results[1] && results[1]['flag']">标签</th>
                    <th v-if="results[0] && results[0]['answerCount'] || results[1] && results[1]['answerCount']">回答数目
                    </th>
                    <th v-if="results[0] && results[0]['cover']">封面</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="result in results">
                    <td style="text-align: center;">{{result.rank}}</td>
                    <td v-if="results[0] && results[0]['keyword']"><a :href="result.url" target="_blank">{{result.keyword}}</a>
                    </td>
                    <td v-else-if="results[0] && results[0]['title']"><a :href="result.url" target="_blank">{{result.title}}</a>
                    </td>
                    <td v-if="flagSubTitle">{{result.subTitle}}</td>
                    <td v-else-if="result['excerpt']">{{result.excerpt}}</td>
                    <td style="text-align: center;"
                        v-if="results[0] && results[0]['count'] || results[1] && results[1]['count']">{{result.count}}
                    </td>
                    <td style="text-align: center;"
                        v-if="results[0] && results[0]['metrics'] || results[1] && results[1]['metrics']">
                        {{result.metrics}} 万热度
                    </td>
                    <td style="text-align: center;"
                        v-if="results[0] && results[0]['flag'] || results[1] && results[1]['flag']">{{result.flag}}
                    </td>
                    <td style="text-align: center;"
                        v-if="results[0] && results[0]['answerCount'] || results[1] && results[1]['answerCount']">
                        {{result.answerCount}}
                    </td>
                    <td v-if="result && result['cover']">
                        <img :src="result.cover" :alt="result.title" style="width: 105px; height: 70px; border-radius: 5px;"/>
                    </td>
                    <td v-else="result && !result['cover']">

                    </td>
                </tr>
                </tbody>
            </table>
            <!--            <div class="information" v-for="result in results">-->
            <!--                <div><a :href="result.url" target="_blank">{{result.keyword}}</a></div>-->
            <!--            </div>-->
            <div class="time" v-if="searchTime !== ''">
                <br>
                <hr>
                <span> 检索时间：</span>
                {{searchTime}}
            </div>
        </div>
    </div>
</div>
<!--前端使用 Vue，实现前后端分离-->
<script th:src="@{/js/axios.min.js}"></script>
<script th:src="@{/js/vue.min.js}"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            keyword: '',    // 搜索的关键字
            page: 1,
            per_page: 10,
            results: [],     // 搜索的结果
            searchTime: '',
            flagSubTitle: false
        },
        methods: {
            searchKey() {
                let keyword = this.keyword;
                let page = this.page;
                let per_page = this.per_page;
                console.log(keyword);
                axios.get("hot/v2/" + keyword + "?page=" + page + "&per_page=" + per_page).then(response => {
                    this.results = response.data;    // 绑定数据
                    this.searchTime = this.results[0]['gmtCreate'];
                    for (let i = 0; i < this.results.length; i++) {
                        if (this.results[i]['subTitle'] && this.results[i]['subTitle'] !== '') {
                            this.flagSubTitle = true;
                            break;
                        }
                    }
                });
            }
        }
    })
</script>
</body>
</html>